/*------------ painel ------------*/
html {
        background: #000;
}
.pagPainel {
        background: #000 url(../../imagens/painelFundo.gif) repeat-x top;
        color: #fff;
        height: 100%;
}
.pagPainel #container {
        width: auto;
        position: static !important;
        padding: 40px 40px 20px 40px;
}
.pagPainel #center {
        background: none;
        float: none !important;
}
.pagPainel #conteudo {
        background: none;
        padding: 0;
        border: 2px solid #666;
        padding: 40px 20px 20px 20px;
}
.pagPainel .mensagem {
        padding: 0 0 0 0;
        margin: 0 40px;
        text-transform: uppercase;
        font-size: 30px;
        font-weight: bold;
        position:absolute;
        bottom:5px;
}
.pagPainel #topo, .pagPainel #rodape {
        display: none;
}
.pagPainel #conteudo h2 {
        color: #fff;
        font: 30px 'arial black', arial, tahoma, verdana;
        font-weight: bold;
        text-transform:uppercase;
        position: absolute;
        top: 8px;
        width: 100%;
        left: 0;
        text-align: center;

}
.pagPainel #conteudo h2 span {
        background:#042445;
        padding: 10px;
}
.pagPainel #conteudo .hora {
        color: #fff;
        font: 20px 'arial black', arial, tahoma, verdana;
        font-weight: bold;
        text-transform:uppercase;
        position: absolute;
        right: 35px;
        top: 5px;
}

.pagPainel #conteudo .hora img{
        position:absolute;
        top: 7px;
        right: 110px;
}

.pagPainel table {
        color: #000;
        border: 2px solid #fff;
        margin-top: 0;
        border-collapse: separate;
        border-top: none;
        background: #fff;
        border-spacing: 2px;
}
.pagPainel table tbody tr.even td {
        background-color: #ECECEC;
        border: 1px solid #CFCFCF;
}
.pagPainel table tbody tr.odd td {
        background-color: #D8D8D8;
        border: 1px solid #B1B1B1;
}
.pagPainel table caption {
        color: #fff;
        border: 2px solid #fff;
        border-bottom: none;
        text-transform: uppercase;
}
.pagPainel table tfoot td {
        font-weight: bold;
}
.pagPainel table thead th {
        text-transform: uppercase;
        text-align: left !important;
}

.pagPainel table th, .pagPainel table td {
        font-weight: bold;
        text-align: center;
}

.pagPainel table th{
        padding: 5px;
}

.pagPainel table td {
        padding: 2px;
}

.pagPainel div.total {
        background: #FEA;
        color: #000;
        font: 16px 'arial black', arial, tahoma, verdana;
        font-weight: bold;
        text-align: center;
        text-transform:uppercase;
        border: 1px solid #D6B532;
        padding: 0;
}

.pagPainel table tbody th,.pagPainel table tfoot th {
        text-align: left;
        background: #CCC;
        border: 1px solid #9D9D9D;
}
.pagPainel table.resumo tfoot td {
        background: #E1E1E1;
        border: 1px solid #9B9B9B;
}
.pagPainel table tfoot tr.verde th {
        text-transform: uppercase;
}
.pagPainel table tfoot tr.verde th, .pagPainel table tfoot tr.verde td {
        border: none;
        background: #B0EDB0;
}

/* --------- cores das tabelas dos paineis ------------*/
.pagPainel table.azul caption {
        background: #004180;
}
.pagPainel table.azul thead th {
        background-color: #C3E3FF;
        color: #004180;
        border: 1px solid #004180;
}
.pagPainel table.azul thead th.headerSortDown, .pagPainel table.azul thead th.headerSortUp {
        background-color: #8ECAFE;
}

.pagPainel table.vermelho caption {
        background: #A00;
}
.pagPainel table.vermelho thead th {
        background-color: #FFD5D5;
        color: #880E0E;
        border: 1px solid #BF3C3C;
}
.pagPainel table.vermelho thead th.headerSortDown, .pagPainel table.vermelho thead th.headerSortUp {
        background-color: #FFADAD;
}

.pagPainel table.verde caption {
        background: #196619;
}
.pagPainel table.verde thead th {
        background-color: #C2F1C2;
        color: #196619;
        border: 1px solid #68A668;
}
.pagPainel table.verde thead th.headerSortDown, .pagPainel table.verde thead th.headerSortUp {
        background-color: #92F892;
}

.pagPainel table.amarelo caption {
        background: #B8960C;
}
.pagPainel table.amarelo thead th {
        background-color: #FFEEAA;
        color: #E9BC00;
        border: 1px solid #E9BC00;
}
.pagPainel table.amarelo thead th.headerSortDown, .pagPainel table.amarela thead th.headerSortUp {
        background-color: #FFE16A;
}

.pagPainel table.laranja caption {
        background: #E3AB02;
}
.pagPainel table.laranja thead th {
        background-color: #FDEFC3;
        color: #C89D1E;
        border: 1px solid #C39409;
}
.pagPainel table.laranja thead th.headerSortDown, .pagPainel table.laranja thead th.headerSortUp {
        background-color: #FFE16A;
}


.pagPainel table.roxo caption {
        background: #991199;
}
.pagPainel table.roxo thead th {
        background-color: #F9D7F9;
        color: #780D78;
        border: 1px solid #780D78;
}
.pagPainel table.roxo thead th.headerSortDown, .pagPainel table.roxo thead th.headerSortUp {
        background-color: #780D78;
}

/*
### criando novas cores de tabelas
eh muito simples: copie as linhas abaixo para fora do comentario:

.pagPainel table.amarela caption {
        background: #B8960C;
}
.pagPainel table.amarela thead th {
        background-color: #FFEEAA;
        color: #E9BC00;
        border: 1px solid #E9BC00;
}
.pagPainel table.amarela thead th.headerSortDown, .pagPainel table.amarela thead th.headerSortUp {
        background-color: #FFE16A;
}

e altere o nome da cor da classe para a cor da sua preferencia (ex: marrom).
Depois eh soh alterar o valor das cores (em hexadecimal)  e aplicar a classe na tabela:

<table class="sortida marrom">
...

*/
